import 'package:flutter/material.dart';
import '../../domain/function_item.dart';


/// `FunctionItemWidget` 是一个用于显示单个功能项的无状态组件。
///
/// 它接收一个 `FunctionItem` 对象来展示图标和标签，并提供一个可选的 `onTap` 回调来处理点击事件。
///
/// - **UI**: 使用 `InkWell` 提供点击效果，并用 `Container` 和 `Column` 构建图标和文本的布局。
/// - **可重用性**: 作为一个独立的组件，它可以在应用的不同位置重用，以保持UI的一致性。
class FunctionItemWidget extends StatelessWidget {
  /// `FunctionItem` 数据模型，包含图标和标签。
  final FunctionItem item;

  /// 点击事件的回调函数。
  final VoidCallback? onTap;

  /// `FunctionItemWidget` 的构造函数。
  ///
  /// - `item`: 功能项的数据，必需。
  /// - `onTap`: 点击时触发的回调，可选。
  const FunctionItemWidget({
    super.key,
    required this.item,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    // `InkWell` 为其子组件提供了水波纹点击效果。
    return InkWell(
      // 触发点击回调。
      onTap: onTap,
      // 定义水波纹效果的边界形状。
      borderRadius: BorderRadius.circular(10),
      child: Container(
        width: 90,
        height: 90,
        decoration: BoxDecoration(
          color: Colors.white,
          // 容器的圆角。
          borderRadius: BorderRadius.circular(10),
        ),
        // `Column` 用于垂直排列图标和文本。
        child: Column(
          // 主轴居中对齐。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示功能项的图标。
            Icon(item.icon, size: 32, color: const Color(0xFF006442)),
            // 图标和文本之间的间距。
            const SizedBox(height: 8),
            // 显示功能项的标签。
            Text(
              item.label,
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 12, color: Colors.black87),
            ),
          ],
        ),
      ),
    );
  }
}